* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;

  #left-button-wrapper {
    position: absolute;
    left: 0;
    width: 19.8%;
    height: 100%;
    background: #383838;
    border-right: 5px solid #e1e0e0;

    h5 {
      padding: 5px;
      margin-bottom: 10px;
      color: white;
      border-bottom: 1px solid #c3ece6;
    }

    ul {
      li {
        display: block;
        float: left;
        padding: 3px;
        list-style: none;

        button {
          background-image: linear-gradient(#f7f8fa, #e7e9ec);
          border-color: #adb1b8 #a2a6ac #8d9096;
          border-style: solid;
          border-width: 1px;
          border-radius: 3px;
          box-shadow: rgba(255, 255, 255, .6) 0 1px 0 inset;
          box-sizing: border-box;
          color: #0f1111;
          cursor: pointer;
          display: inline-block;
          font-family: "Amazon Ember", Arial, sans-serif;
          height: 29px;
          font-size: 13px;
          outline: 0;
          overflow: hidden;
          padding: 0 11px;
          text-align: center;
          text-decoration: none;
          text-overflow: ellipsis;
          user-select: none;
          -webkit-user-select: none;
          touch-action: manipulation;
          white-space: nowrap;
        }
      }
    }

    .plot-action-wrapper {
      height: 120px;
      border-bottom: 2px solid #959292;
    }

    .base-plot-wrapper, .flag-arrow-wrapper, .important-element-wrapper {
      height: 120px;
      border-bottom: 2px solid #959292;
    }

    .rescue-element-wrapper {
      height: 160px;
      border-bottom: 2px solid #959292;
    }

    .flag-arrow-wrapper {

    }
  }

  #map {
    position: absolute;
    width: 80%;
    height: 100%;
    right: 0;
  }
}